<template>
	<div class="already-buy">
		<div class="nav-head"><router-link to="/album"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">已购</div></div>
		<div class="top-blank"></div>
		<div class="already-buy-wraper">
			<div class="already-buy-list">
				<div class="already-buy-nav">
					<span :class="{'active':selectSingle}" @click="SelectSingle">单曲</span>
					<span :class="{'active':selectAlbum}" @click="SelectAlbum">专辑</span>
					<span :class="{'active':selectEntity}" @click="SelectEntity">实体</span>
				</div>
				<div class="already-buy-album">
					<div class="album-box mr10">
						<img src="../../../../assets/already-buy-pic1.png">
						<div class="album-info">
							<p class="album-name">如果爱忘了</p>
							<p class="album-singer">戚薇</p>
							<p class="album-price">￥ <span>30</span></p>
							<div class="buy-btn">购买</div>
						</div>
					</div>
					<div class="album-box">
						<img src="../../../../assets/already-buy-pic1.png">
						<div class="album-info">
							<p class="album-name">如果爱忘了</p>
							<p class="album-singer">戚薇</p>
							<p class="album-price">￥ <span>30</span></p>
							<div class="buy-btn">购买</div>
						</div>
					</div>
				</div>
				<div class="look-more-record">查看更多购买记录<img src="../../../../assets/icon-next20.png"></div>
			</div>
			<div class="weekly-single-wraper">
				<h2>推荐本周热销单曲</h2>
				<div class="weekly-single-list">
					<div>
						<img src="../../../../assets/23240.png">
						<p class="song-name">伟大的渺小</p>
						<p class="song-singer">林俊杰</p>
					</div>
					<div class="mlr15">
						<img src="../../../../assets/21240.png">
						<p class="song-name">修炼爱情</p>
						<p class="song-singer">林俊杰</p>
					</div>
					<div>
						<img src="../../../../assets/22240.png">
						<p class="song-name">曹操</p>
						<p class="song-singer">林俊杰</p>
					</div>
					<div>
						<img src="../../../../assets/21240.png">
						<p class="song-name">伟大的渺小</p>
						<p class="song-singer">林俊杰</p>
					</div>
					<div class="mlr15">
						<img src="../../../../assets/22240.png">
						<p class="song-name">修炼爱情</p>
						<p class="song-singer">林俊杰</p>
					</div>
					<div>
						<img src="../../../../assets/23240.png">
						<p class="song-name">曹操</p>
						<p class="song-singer">林俊杰</p>
					</div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"alreadyBuy",
		data(){
			return{
				selectSingle:false,
				selectAlbum:true,
				selectEntity:false
			}
		},
		components:{
			musicPlayer
		},
		methods:{
			SelectSingle(){
				this.selectSingle = true;
				this.selectAlbum = false;
				this.selectEntity = false;
			},
			SelectAlbum(){
				this.selectSingle = false;
				this.selectAlbum = true;
				this.selectEntity = false;
			},
			SelectEntity(){
				this.selectSingle = false;
				this.selectAlbum = false;
				this.selectEntity = true;
			}
		}
	}
</script>
<style scoped lang="less">
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
	background-color: #fff;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}	
.already-buy-wraper{
	width: 100%;
	background-color: #dbd7df;
	.already-buy-list{
		background-color: #fff;
		.already-buy-nav{
			display: flex;
			font-size: 30 / 100rem;
			padding-top: 32 / 100rem;
			padding-bottom: 10 / 100rem;
			text-align: center;
			span{
				flex:1;
				padding-bottom:10 / 100rem;
				color: #333;
				border-bottom: 4 / 100rem solid #fff;
				display: block;
			}
			.active{
				color: #c995f5;
				border-bottom: 4 / 100rem solid #c995f5;
			}
		}
		.already-buy-album{
			width: 100%;
			overflow: hidden;
			.album-box{
				float: left;
				width: 370 / 100rem;
				img{
					width: 100%;
				}
				.album-info{
					padding-left: 20 / 100rem;
					position: relative;
					.album-name{
						line-height: 54 / 100rem;
						font-size: 24 / 100rem;
					}
					.album-singer{
						line-height: 30 / 100rem;
						font-size: 24 / 100rem;
					}
					.album-price{
						line-height: 43 / 100rem;
						font-size: 24 / 100rem;
					}
					.buy-btn{
						position: absolute;
						width: 96 / 100rem;
						height: 46 / 100rem;
						text-align: center;
						border-radius: 18 / 100rem;
						border:2 / 100rem solid #333;
						top:65 / 100rem;
						right: 20 / 100rem;
						line-height: 46 / 100rem;
 					}
				}
			}
		}
		.look-more-record{
			text-align: center;
			font-size: 24 / 100rem;
			padding-top: 56 / 100rem;
			padding-bottom: 50 / 100rem;
			img{
				width: 12 / 100rem;
				margin-left: 20 / 100rem;
			}
		}
	}
	.weekly-single-wraper{
		background-color: #fff;
		width: 100%;
		margin-top: 20 / 100rem;
		h2{
			padding-top: 30 / 100rem;
			padding-left: 20 / 100rem;
			padding-bottom: 23 / 100rem;
			font-size: 30 / 100rem;
		}
		.weekly-single-list{
			width: 100%;
			overflow: hidden;
			div{
				float: left;
				width: 240 / 100rem;
				height: 345 / 100rem;
				font-size: 24 / 100rem;
				img{
					width: 100%;
				}
				p{
					padding-left: 10 / 100rem;
					padding-bottom: 20 / 100rem;		
				}
				.song-name{
					padding-top: 15 / 100rem;
					padding-bottom: 20 / 100rem;
				}
			}
		}
	}
}	
.mr10{
	margin-right: 10 / 100rem;
}
.mlr15{
	margin-left: 15 / 100rem;
	margin-right: 15 / 100rem;
}
</style>